<template>
    <el-dialog title="选择箱" :visible.sync="dialogForm" :modal="false" width="1000px">
        <el-form :inline="true" ref="form" :model="form" class="search-form" label-width="90px">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="作业港口：" prop="portCode">
                        <select-port :disabled="true" v-model="form['search_EQ_portCode']" :name="form['search_EQ_portCode']"></select-port>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="船名：" prop="shipName">
                        <el-input :disabled="true" v-model="form['search_EQ_shipName']"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="航次：" prop="voyage">
                        <el-input :disabled="true" v-model="form['search_EQ_voyage']"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="箱号：" prop="containerId">
                        <el-input v-model="form['search_LIKE_containerId']"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="尺寸：" prop="containerSize">
                        <autoSearchSize v-model="form['search_EQ_containerSize']"></autoSearchSize>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="提单号：" prop="billNumber">
                        <el-input v-model="form['search_LIKE_billNumber']"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-row>
            <el-button type="primary" @click="loadData" class="ml-100">查 询</el-button>
            <el-button @click="handleSelect">选 择</el-button>
            <el-button @click="dialogForm=false">取 消</el-button>
        </el-row>
        <el-row class="mt-10 ">
            <el-col :span="8">
                <el-tag size="medium">
                    {{ selectTitle }}
                </el-tag>
            </el-col>
        </el-row>
        <el-table :data="list" border stripe max-height="500" class="mt-10" @selection-change="handleSelectionChange">
            <el-table-column fixed="left" type="selection" prop="id" width="55"></el-table-column>
            <el-table-column type="index" label="序号" fixed="left"  width="55"></el-table-column>
            <el-table-column prop="containerId" label="箱号"  min-width="130"></el-table-column>
            <el-table-column prop="containerSize" label="尺寸"  min-width="80"></el-table-column>
            <el-table-column prop="containerType" label="箱型"  min-width="80"></el-table-column>
            <el-table-column prop="ef" label="空重"  min-width="80">
                <template slot-scope="scope">
                    {{ scope.row.ef | _filterIfHeavyType }}
                </template>
            </el-table-column>
            <el-table-column prop="billNumber" label="提单号"  min-width="140"></el-table-column>
            <el-table-column prop="cargoName" label="货名"  min-width="120"></el-table-column>
            <el-table-column prop="cargoCount" label="件数"  min-width="100"></el-table-column>
            <el-table-column prop="isSendCustoms" label="海关放行"  min-width="120"></el-table-column>
            <el-table-column prop="shipAgentName" label="船代"  min-width="120"></el-table-column>
        </el-table>
    </el-dialog>
</template>

<script>
    import autoSearchSize from "@/components/autocomplete/autoSearchSize";
    import { getBoxSelect } from "@/api/shipPlan/shipPlan";
    import selectPort from '@/components/select/selectPort'

    export default {
        name: "feeBoxSelect",
        components: {
            autoSearchSize,selectPort
        },
        data() {
            return {
                dialogForm: false,
                form: this.clearForm(),
                list: [],
                select: [],
            }
        },
        methods: {
            loadData() {
                const params = this.$assist.copySearchConditions(this.form)
                params.search_EQ_ef = 'F'
                params.search_EQ_tradeType = 'O'
                params.search_EQ_isPass = '0'
                getBoxSelect(params).then(res => {
                    this.list = res.data.aaData
                })
            },
            handleSelect() {
                if (this.select.length === 0) {
                    this.$message({ message: '请先选择数据!', type: 'error' })
                    return
                }
                this.$emit('select', this.select)
                this.dialogForm = false
            },
            handleSelectionChange(val) {
                this.select = val
            },
            clearForm(){
                return {
                    search_EQ_portCode:'',
                    search_EQ_shipName:'',
                    search_EQ_voyage:'',
                    search_LIKE_containerId:'',
                    search_EQ_containerSize:'',
                    search_LIKE_billNumber:'',
                    search_EQ_shipCode:''
                }
            }
        },
        computed:{
            selectTitle() {
                if (this.select.length === 0) {
                    return '未选择'
                } else {
                    return '已选择 ' + this.select.length + ' 条数据'
                }
            }
        },
        watch: {
            dialogForm(bool) {
                if (!bool) {
                    this.$parent.selectForm = false
                }
            }
        }
    }
</script>

<style scoped>

</style>
